<div class="uInfos" ng-controller="userInfo">
    <h3>用户信息</h3>
    <form class="form-horizontal" name="myForm" ng-submit="processForm(myForm.$valid)" novalidate>
        <div class="col-md-2 clearfix" style="position:absolute;right:80px;top:90px;">
            <img  ng-cloak ng-src="{{formData.logo}}" alt="{{formData.userName}}" class="img-thumbnail" id="userLogo">
            <p class="text-center" id="uploadULogoImg"><a href="javascript:void(0)">修改</a></p>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">&nbsp;</label>
            <div class="col-md-4">
                <p class="text-danger hide" id="errorInfo">邮箱和密码不匹配</p>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">Email</label>
            <div class="col-sm-4">
                <input type="email" class="form-control" name="email" ng-model="formData.email" disabled>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">真实姓名</label>
            <div class="col-sm-4">
                <input type="text" class="form-control"  name="name" ng-minlength="2" ng-maxlength="6" ng-pattern="/[\u4e00-\u9fa5]/" ng-model="formData.name" />
                <label ng-cloak for="inputError" class="control-label text-danger" ng-show="myForm.name.$invalid && !myForm.name.$pristine"><i class="glyphicon glyphicon-info-sign"></i>2-6个中文字符</label>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">所在城市</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" ng-model="formData.city" ng-minlength="0" ng-maxlength="12"/>
                <label ng-cloak for="inputError" class="control-label text-danger" ng-show="myForm.city.$invalid && !myForm.city.$pristine"><i class="glyphicon glyphicon-info-sign"></i> 0-12个非特殊字符</label>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">学校</label>
            <div class="col-sm-4">
                <input type="text" class="form-control"  name="company" ng-minlength="0" ng-maxlength="12" ng-model="formData.company"/>
                <label ng-cloak for="inputError" class="control-label text-danger" ng-show="myForm.company.$invalid && !myForm.company.$pristine"><i class="glyphicon glyphicon-info-sign"></i> 0-12个非特殊字符</label>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">QQ号码</label>
            <div class="col-sm-4">
                <input type="number" class="form-control"  name="qq" ng-minlength="0" ng-model="formData.qq" ng-pattern="/^[1-9][0-9]{4,9}$/"/>
                <label ng-cloak for="inputError" class="control-label text-danger" ng-show="myForm.qq.$invalid && !myForm.qq.$pristine"><i class="glyphicon glyphicon-info-sign"></i>请填写正确的QQ号码</label>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" name="phoneNum" ng-model="formData.phoneNum" ng-pattern="/^1[3|4|5|8][0-9]\d{4,8}$/" >移动电话</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" />
                <label ng-cloak for="inputError" class="control-label text-danger" ng-show="myForm.phoneNum.$invalid && !myForm.phoneNum.$pristine"><i class="glyphicon glyphicon-info-sign"></i>请填写正确的手机号码</label>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">关于自己</label>
            <div class="col-sm-6">
                <textarea class="col-sm-12" name="" id="" rows="6" style="border:1px solid #dbe2e6;"  ng-model="formData.comments"></textarea>
                <label ng-cloak for="inputError" class="control-label text-danger" ng-show="myForm.comments.$invalid && !myForm.comments.$pristine"><i class="glyphicon glyphicon-info-sign"></i>请填写正确的介绍</label>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default" ng-disabled="myForm.$invalid">提交</button>
            </div>
        </div>
    </form>
</div>
<script>
    var webApp = angular.module('webApp',[]);
    webApp.controller('userInfo',function($scope,$http){
        $scope.targetId = "<%= userInfo._id %>";
        if($scope.targetId){
            //查询用户的信息
            $http.get('/users/userInfo?uid=' + $scope.targetId)
                    .success(function(result){
                        $scope.formData = result;
                    })
        };
        //图片上传
        $('#uploadULogoImg').uploadify({
            'swf':'/plugins/uploadify/uploadify.swf',
            'uploader':'/system/upload?type=images&key=userlogo',
            'buttonText':'上传图片',
            'buttonClass':'uploadify-btn-default',
            'width':100,
            'auto':true,
            'fileTypeDesc': 'Image Files',
            'fileTypeExts':'*.gif; *.jpg; *.png',
            'multi':false,
            //上传成功执行的函数
            'onUploadSuccess':function(file,data,response){
                if(data === 'typeError'){
                    alert('文件类型不正确，请重新尝试');
                    return;
                }else{
                    alert('上传成功');
                    $("#userLogo").attr("src",data);
                    $scope.formData.logo = data;
                }
            },
            'onComplete': function(event, queueID, fileObj, response, data) {//当单个文件上传完成后触发
                alert("文件:" + fileObj.name + " 上传成功！");
            }
        })
        //修改用户的信息
        $scope.processForm = function(isValid){
            if(isValid){
                $http({
                    method : 'POST',
                    url : "/users/userInfo/modify?uid="+$scope.targetId,
                    data : $.param($scope.formData),
                    headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
                }).success(function(data) {
                            if(data === "success"){
                                alert('修改信息成功')
                            }else{
                                $('#errorInfo').removeClass('hide').text(data);
                            }
                        });
            }else{
                alert("error");
            }
        };
    })
</script>